<template>
  <div class="commonBoxmp">
    <el-scrollbar class="HeightAuto">
    <div>
    <div class="userbox ">
      <div class="left aic">
        <el-avatar
          :size="80"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
        <div class="ml15">
          <div class="describe">早安, llt Admin, 开始您一天的工作吧！</div>
          <div class="content gray">今日晴，20℃ - 32℃！</div>
        </div>
      </div>
      <div class="right aic">
        <div class="flex1 jcc fdc aic">
          <div class="gray">待办</div>
          <h1 class="titlenum">2/10</h1>
        </div>
        <div class="flex1 jcc fdc aic">
          <div class="gray">项目</div>
          <h1 class="titlenum">3</h1>
        </div>
        <div class="flex1 jcc fdc aic">
          <div class="gray">团队</div>
          <h1 class="titlenum">30</h1>
        </div>
      </div>
    </div>
    <div class="business fd">
      <div class="left">
      </div>
      <div class="right">
        <el-card shadow="never">
          <template #header>
            <div class="card-header jcb aic">
              <span>项目</span>
              <el-button class="button" type="text">更多</el-button>
            </div>
          </template>
          <div class="aic project">
            <div class="flex1 item">
              <el-card
                shadow="hover"
                @click="
                  goHref('https://blueskyliu.gitee.io/vuepress-starter-blog/')
                "
              >
                <div class="fdc aic jcc">
                  <el-avatar
                    :size="50"
                    style="background: #fff"
                    fit="fill"
                    src="https://vitejs.cn/logo.svg"
                  ></el-avatar>
                  <el-button type="text" class="button">博客</el-button>
                </div>
              </el-card>
            </div>
            <div class="item flex1">
              <el-card
                @click="goHref('http://blueskyliu.gitee.io/llt-admin-preview')"
                shadow="hover"
                style="border-left: none; border-right: none"
              >
                <div class="fdc aic jcc">
                  <el-avatar
                    fit="fill"
                    :size="50"
                    style="background: #fff"
                    src="https://cn.vuejs.org/images/logo.svg"
                  ></el-avatar>
                  <el-button type="text" class="button">llt-admin</el-button>
                </div>
              </el-card>
            </div>
            <div class="flex1 item">
              <el-card
                shadow="hover"
                @click="goHref('https://gitee.com/blueskyliu')"
              >
                <div class="fdc aic jcc">
                  <el-avatar
                    :size="50"
                    fit="fill"
                    style="background: #fff"
                    src="https://gitee.com/static/images/logo-black.svg?t=158106664"
                  ></el-avatar>
                  <el-button type="text" class="button">码云</el-button>
                </div>
              </el-card>
            </div>
          </div>
        </el-card>

        <el-card shadow="never" class="mt20">
          <template #header>
            <div class="card-header jcb aic">
              <span>最新动态</span>
              <el-button class="button" type="text">更多</el-button>
            </div>
          </template>
          <div
            class="aic mt20"
            v-for="(item, index) in state.messages"
            :key="index"
          >
            <el-avatar :size="50" :src="item.img"></el-avatar>
            <div class="ml15">
              <div class="describe">{{ item.name }}</div>
              <div class="content gray">{{ item.content }}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
    </el-scrollbar>
  </div>


</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import dayjs from "dayjs";
import "calendar-vue3/dist/style.css";
const router = useRouter();
const route = useRoute();
onMounted(() => {});
const handleScopeOf = (e: any) => {
  setTimeout(() => {
    console.log("ehandleScopeOf :>> ", e.next());
  }, 2000);
};
const popoverData = [
  {
    list: [
      {
        name: "张三",
        phone: "199",
      },
    ],
    date: "2022-01-11",
  },
  {
    list: [
      {
        name: "张三",
        phone: "199",
      },
      {
        name: "李四",
        phone: "120",
      },
    ],
    date: "2022-01-01",
  },
];
const handleCurrentEvent = (e: any) => {
  setTimeout(() => {
    console.log("handleCurrentEvent :>> ", e.next());
  }, 2000);
};
const handleCurrent = (e: any) => {
  //  state.activeDate =  dayjs(e.date).format("YYYY-MM-DD")
  console.log("handleCurrent :>> ", e);
};
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const goHref = (str: string) => {
  window.open(str);
};
const arrCalendar: any = {
  "2021-11-01": "今天第一条上班",
  "2021-11-07": "客户第二次会面",
  "2021-11-23": "同事聚会",
};
const count = ref(0);
const state = reactive({
  data: { a: 1 },
  messages: [
    {
      name: "李勇",
      content: "昨天的客户ok了",
      img:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    },
    {
      name: "李老板",
      content: "项目加快进度了",
      img: "https://q1.qlogo.cn/g?b=qq&nk=190848757&s=640",
    },
    {
      name: "威廉 在 开源组 创建了项目 Vue",
      content: "刚刚",
      img: "https://vvbin.cn/next/assets/illustration.8e82152d.svg",
    },
    {
      name: "皮特 回复了 杰克 的问题 如何进行项目优化？",
      content: "3天前",
      img:
        "https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ",
    },
  ],
  getCalendar: (key: string) => {
    return arrCalendar[key];
  },
  value: "",
});
</script>

<style scoped lang="scss">
.describe {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.content {
  line-height: 1.75rem;
}
.userbox {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 20px;

  .left {
    flex: 6;
  }
  .right {
    flex: 2;
    .titlenum {
      margin-top: 10px;
      font-weight: 500;
    }
  }
}
.business {
  padding: 20px;
  overflow: auto;
  .left {
    flex: 6;
    margin-right: 20px;
  }
  .right {
    flex: 3;

    .project {
      flex-wrap: wrap;
      .item {
        width: 33.3%;
        min-width: 33.3%;
        max-width: 33.3%;
        .el-card {
          border-radius: 0;
        }
      }
    }
  }
}
</style>
